<template>
  <div class="search">
    <!-- 头部 -->
    <Header :showLeft="true" title="搜索"></Header>
    <div class="search-header">
      <form action="post" class="search-form" @submit.prevent>
        <i class="fa fa-search"></i>
        <input type="text" placeholder="请输入商家/商品信息" v-model.trim="key_word" @keyup.enter.prevent="searchTarget">
        <button @click="searchTarget">搜索</button>
      </form>
    </div>
    <div class="searchItem" v-if="searchResult && !showShop">
      <div class="search-item">
        <search-list :data=" searchResult.restaurants" @click.native="$router.push('/detail')">
        </search-list>
        <search-list :data="searchResult.words" @clickLi="showShopInfo"></search-list>
      </div>

    </div>
    <div class="search-empty" v-else>
      <div class="empty" v-if="empty">
        <div class="empty-wrap">
          <img src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png" alt="">
        </div>
        <div class="empty-text">
          <h4>附近没有搜索结果</h4>
          <span>换个关键词试试吧!!!</span>
        </div>
      </div>
    </div>
    <div class="shop-container" v-if="showShop">
      <filter-view :filterViewData="filterViewData" @getSort="getSort"></filter-view>
      <div class="info" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <shop-info v-for="(item,index) in shopInfoData" :key="index" :data="item.restaurant"></shop-info>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
import SearchList from '@/components/SearchList'
import FilterView from './FiiterView'
import ShopInfo from './ShopInfo'
import { InfiniteScroll } from 'mint-ui'
import Vue from 'vue'
Vue.use(InfiniteScroll)

export default {
  name: 'MySearch',
  components: {
    Header,
    SearchList,
    FilterView,
    ShopInfo
  },
  data() {
    return {
      key_word: '',
      searchResult: null,
      empty: false,
      judgeEmpty: false,
      showShop: false,
      filterViewData: null,
      data: null,
      shopInfoData: [],
      page: 0,
      size: 7,
      loading: false
    }
  },
  created() {
    this.getData()
  },
  watch: {
    key_word() {
      this.empty = false
      if (this.key_word !== '') {
        this.changeSearchkeyWord()
      }
      else {
        this.searchResult = {}
      }
    }
  },
  methods: {
    changeSearchkeyWord() {
      this.$http(`/api/profile/typeahead/${this.key_word}`).then(res => {
        this.searchResult = res.data
      }).catch(err => {
        this.searchResult = null
        console.log(err.message)
      })
    },
    // 点击搜索框
    searchTarget() {
      if (!this.key_word) return
      // 代表搜索到了东西
      if (this.searchResult && this.searchResult.restaurants.length > 0 || this.searchResult.words.length > 0) {
        this.empty = false
        // 显示商家信息
        this.showShop = true
      }
      else {
        this.empty = true
        this.searchResult = null
      }
    },
    // 点击了搜索后下的li
    showShopInfo() {
      this.page = 0
      this.shopInfoData = []
      this.showShop = true
    },
    getSort(sortCode) {
      this.data = sortCode
      this.showShop()
    },
    getData() {
      // 获取导航栏中筛选信息
      this.$http('/api/profile/filter').then(res => {
        this.filterViewData = res.data
      }).catch(err => {
        console.log(err.messgae)
      })
    },
    loadMore() {
      this.page++
      // 获取商家信息
      this.$http.post(`/api/profile/restaurants/${this.page}/${this.size}`, this.data).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.shopInfoData.push(item)
          })
        }
        else {
          // 没有数据可以继续加载了
          this.loading = true
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-header {
  background-color: #fff;
  padding: 20px;
  height: 70px;
  box-sizing: border-box;
  .search-form {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    input {
      flex: 1;
      border: none;
      outline: none;
      background-color: #eee;
      height: 100%;
      border-radius: 8px;
      box-shadow: 5px 3px 5px #ccc;
      padding: 5px 30px;
    }
    button {
      border: none;
      outline: none;
      height: 100%;
      color: #333;
      font-weight: 700;
      margin-left: 10px;
      background-color: #fff;
      font-size: 18px;
    }
    i {
      position: absolute;
      top: 7px;
      left: 10px;
      &:before {
        color: #666;
      }
    }
  }
}
.search-empty {
  position: relative;
  .empty-wrap {
    height: 200px;
    margin: 0 auto;
    img {
      height: 100%;
    }
  }
  .empty-text {
    position: absolute;
    top: 68px;
    right: 66px;
    line-height: 2;
    color: skyblue;
    h4 {
      color: #333;
    }
  }
}
.filter-view {
  margin-top: 0 !important;
  position: relative !important;
  top: 0;
}
.shop-container {
  padding-bottom: 50px;
}
</style>
